<template>
  <view class="auth-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	  <div class="auth-top">
		 <div class="top-info-div">
			 <div class="info-name" @click="show=true">
			   <span style="padding-right:20rpx">{{form.companyName}}</span>
			   <u-icon name="arrow-down-fill" color="#747474"></u-icon>
			 </div>
			 <div class="into-btn">
				 <div class="btn-item" :class="{'choose':curIndex == 1}" @click="changeIndex(1)">基本信息</div>
				 <div class="btn-item" :class="{'choose':curIndex == 2}" @click="changeIndex(2)">订单</div>
				 <div class="btn-item" :class="{'choose':curIndex == 3}" @click="changeIndex(3)">人员</div>
			 </div>
		 </div>
	  </div>
	  <div class="info-con">
			<div class="base-info" v-if="curIndex == 1">
				  <u--form class="u-form" labelPosition="left" labelWidth='180rpx' :model="form"  ref="uForm" errorType="toast">
					  <div class="licensePicUrl-div">
						   <img :src="form.licensePicUrl" style="width: 321rpx;height: 233rpx;" @click="preview(form.licensePicUrl)"/>
					  </div>
					  <div class="licensePicUrl-text">营业执照</div>
					  <u-form-item label="公司名称" borderBottom required>
						  <div style="text-align: right;">{{form.companyName}}</div>
					  </u-form-item>
					  <u-form-item label="统一信用码" borderBottom required>
						  <div style="text-align: right;">{{form.creditCode}}</div>
					  </u-form-item>
					  <u-form-item label="注册地址" borderBottom>
					  		<u--input v-model="form.regAddress" input-align="right"  placeholder="请输入注册地址" border="none"></u--input>				
					  </u-form-item>
					  <u-form-item label="联系电话" borderBottom>
					  		<u--input v-model="form.regPhone" input-align="right"  placeholder="请输入联系电话" border="none"></u--input>				
					  </u-form-item>
					  <u-form-item label="开户行" borderBottom>
					  		<u--input v-model="form.bankName" input-align="right"  placeholder="请输入开户行" border="none"></u--input>				
					  </u-form-item>
					  <u-form-item label="开户行帐号" borderBottom>
					  		<u--input v-model="form.bankNumber" input-align="right"  placeholder="请输入开户行帐号" border="none"></u--input>				
					  </u-form-item>
					  <u-form-item label="设为默认" borderBottom>
						  <div style="display: flex;justify-content: flex-end">
							  <u-switch v-model="form.isDefault"  :activeValue="1" :inactiveValue="0"></u-switch>	
						  </div>
					  		
					  </u-form-item>
					 
				  </u--form>
			</div>
            <div class="order-list" v-if="curIndex == 2">
				<div>
					<div class="order-item" v-for="item in orderList">
						<div class="item-top">
							{{item.storeName}}
							<div class="top-state">{{item.orderStateName}}</div>
						</div>
						<div class="goods-div">
							<div class="goods-name">{{item.inquiryTitle}}</div>
							<div class="goods-price">￥{{item.goodsPrice}}元/吨</div>
						</div>
						<div class="order-info">
							<div class="info-row">
								<div class="row-label">订单数量：</div>
								<div class="row-con">{{item.goodsNum}}吨</div>
							</div>
							<div class="info-row">
								<div class="row-label">发货地址：</div>
								<div class="row-con">{{item.orderAddress}}</div>
							</div>
							<div class="info-row">
								<div class="row-label">发货日期：</div>
								<div class="row-con">{{item.orderSendTime}}</div>
							</div>
							<div class="info-row">
								<div class="row-label">下单人：</div>
								<div class="row-con">{{item.buyerPhone}}<span style="padding-left:20rpx">{{item.buyerName}}</span></div>
							</div>
							<div class="info-row">
								<div class="row-label">下单时间：</div>
								<div class="row-con">{{item.createdAt}}</div>
							</div>
						</div>
						<div class="order-bottom">
							<div class="order-price">总额：<span class="num">￥{{item.orderAmount}}</span></div>
							<u-button text="查看详情" @click="toOrder(item.orderId)" size="small" shape="circle" type="primary"  color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)" :custom-style="{'width':'188rpx'}"></u-button>
						</div>
					</div>
				</div>
				
				
				<div style="padding-bottom:40rpx;"  v-if="orderList.length > 0">
					  <u-loadmore :status="status"></u-loadmore>
				</div>
				
				<div v-else style="margin-top:88rpx">
					<u-empty text="暂无数据" mode="list" icon="https://pic.moresu.com/Fs-rZPgApAIGT8szof2GUATIiF8N" > </u-empty>
				</div>
				
			</div>
			<div class="user-list" v-if="curIndex == 3">
				<div>
					<div class="user-item" v-for="item in userList">
						<div class="user-left">
							<div class="left-top">{{item.userRealname}}  <span style="padding-left:20rpx">{{item.mobile}}</span></div>
							<div class="left-bottom">关联时间：{{item.createdAt}}</div>
						</div>
						<div class="user-right">
							<div class="right-top"> {{item.checkState == 0 ? '待审核' : item.checkState == 1 ? '已关联' : '已拒绝'}} </div>
							<div class="right-bottom">
								<span v-if="item.checkState == 1" @click="setGl(item.relationId,3)">解除关联</span>
								<span v-if="item.checkState == 0" style="display: inline-block;"  @click="setGl(item.relationId,2)">拒绝</span>
								<span v-if="item.checkState == 0" style="margin-left:60rpx;display: inline-block;"  @click="setGl(item.relationId,1)">同意</span>
							</div>
						</div>
					</div>
				</div>
				
				<div style="padding-bottom:40rpx;" v-if="userList.length > 0">
					<u-loadmore :status="status2"></u-loadmore>
				</div>
				
				<div v-else style="margin-top:88rpx">
					<u-empty text="暂无数据" mode="list" icon="https://pic.moresu.com/Fs-rZPgApAIGT8szof2GUATIiF8N" > </u-empty>
				</div>
				
			</div>
	  </div>
	  
    <div class="perfect-auth-button" v-if="curIndex == 1" style="z-index: 5;">
    	<div style="width:48%">
    		<u-button :plain="true" shape="circle" @click="delCompanyId">解除绑定</u-button>
    	</div>
    	<div style="width:48%">
            <u-button type="primary" shape="circle" @click="editAddCompany">完善信息</u-button>
    	</div> 
    </div>
    <u-picker :show="show" :columns="columns" keyName="companyName" @cancel="show=false" @confirm="changeCompany"></u-picker>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import {editCompany,delCompany,companyInfo,getMyCompanyList} from '@/config/api2.js'
  
  import {companyUser,setGlCompany,getOrderList} from '@/config/api.js'
  
  import store from '@/store'

  const defaultForm = {
  	 companyId: '',
  	 companyName: '',
  	 creditCode: '',
  	 licensePicUrl: '',
  	 regAddress:'',
  	 regPhone: '',
  	 bankName: '',
  	 bankNumber:'',
  	 isDefault: 0
  }
  
  const md5 = require('../../plugins/md5.min.js');
  export default {
    data() {
      return {
		form:JSON.parse(JSON.stringify(defaultForm)),
        show:false,
		columns:[] ,
		curIndex:1,
		companyId:'',
		
		userList:[],
		pageNum2:1,
		pageSize2:10,
		status2: 'loadmore',
		
		orderList:[],
		pageNum:1,
		pageSize:10,
		status: 'loadmore',
      }
    },
    onLoad(e) {
      if (e.companyId) {
		  this.companyId = e.companyId
          this.getCompanyInfo(e.companyId)
		  this.getUserList();
		  this.getList()
      }
    },
	onReachBottom() {
		if(this.curIndex == 2){
			if(this.orderList.length >= this.count) {
				this.status = 'nomore';
				return ;
			}
			this.pageNum = ++ this.pageNum;
			this.getOrderList()
		}else if(this.curIndex == 3){
			if(this.userList.length >= this.count2) {
				this.status2 = 'nomore';
				return ;
			}
			this.pageNum2 = ++ this.pageNum2;
			this.getUserList()
		}
		
	},
    computed: {},
    methods: {
		preview(url){
			uni.previewImage({urls: [url]});
		},
		toOrder(orderId){
			uni.navigateTo({
			    url:'/pages/my/orderInfo?orderId='+orderId
			})
		},
		
		setGl(relationId,type){
			let text = ''
			if(type == 3){
				text = '确定解除关联吗？' 
			}else if(type == 2){
				text = '确定拒绝关联申请吗？' 
			}else if(type == 1){
				text = '确定通过关联申请吗？' 
			}
			uni.showModal({
			  title: '提示',
			  content:text,
			  success: (res) => {
			    if (res.confirm) {
			      setGlCompany({
			        relationId: relationId,
					setType:type
			      }).then(() => {
			       this.clearData2()
			       this.getUserList()
			      })
					  
			    } else if (res.cancel) {
			      console.log('用户点击取消');
			    }
			  }
			});
		},
		
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.orderList = [];
			this.status = 'loadmore';
			this.count = 0;
		},
		
		//清除数据
		clearData2(){
			this.pageNum2 = 1;
			this.userList = [];
			this.status2 = 'loadmore';
			this.count2 = 0;
		},
		
		getUserList(){
			this.status2 = 'loading';
			companyUser({companyId:this.companyId,pageNum:this.pageNum2,pageSize:this.pageSize2}).then((res)=>{
				this.userList = this.userList.concat(res.list ? res.list : [] );
				this.count2 = res.count;
				if(this.userList.length >= this.count2) {
					this.status2 = 'nomore';
				}else{
					this.status2 = 'loadmore';
				}

			}).catch(()=>{
					this.status2 = 'loadmore';
			})
		},
		
		getOrderList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			data.orderState = 'all';
			data.companyId = this.companyId;
			data.type = 'allBuyer';
			this.status = 'loading';
			getOrderList(data).then((res)=>{
				this.orderList = this.orderList.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.orderList.length >= this.count2) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
		
			}).catch(()=>{
					this.status = 'loadmore';
			})
		},
		
		
		changeIndex(index){
			this.curIndex = index;
			this.clearData()
			this.clearData2()
			if(this.curIndex == 2){
				this.getOrderList()
			}else if(this.curIndex == 3){
				this.getUserList()
			}
		},
		getList() {
			 this.columns = []
			   getMyCompanyList({type:1}).then(res => {
				 this.columns.push(res)
				 console.log("columns",this.columns)
			   })
		 },
		changeCompany(item){
			this.companyId = item.value[0]['companyId']
			this.getCompanyInfo(item.value[0]['companyId'])
			this.getUserList();
			this.show = false
		},


      // 删除公司
      delCompanyId() {
        uni.showModal({
          title: '删除提示',
          content: '您将移除这个公司',
          success: (res) => {
            console.log("res", res)
            if (res.confirm) {
              uni.setStorage({
                key: 'delCompany',
                data: {
                  id: this.form.companyId
                }
              })
              delCompany({
                companyId: this.form.companyId
              }).then(() => {
                uni.navigateBack();
              })

            } else if (res.cancel) {}
          }
        });
      },
      
      
	  
      // 提交认证 
      editAddCompany() {
        editCompany(this.form).then(res => {
          uni.setStorage({
            key: 'editAddCompany',
            data: {
              id: this.companyId
            }
          })
          uni.showToast({
            title: '提交成功！',
            icon: 'success'
          });
          store.dispatch('userInfo')
          uni.navigateBack()
        })
      },
      // 认证公司详情
      getCompanyInfo(companyId) {
        companyInfo({companyId }).then(res => {
          this.form.companyId = res.companyId
          this.form.companyName = res.companyName
          this.form.checkState = res.checkState
          this.form.creditCode = res.licenseCode
          this.form.licensePicUrl = res.businessLicense
          this.form.isDefault = res.isDefault
          this.form.regAddress = res.regAddress
          this.form.regPhone = res.regPhone
          this.form.bankName = res.bankName
          this.form.bankNumber = res.bankNumber
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
   @import '@/style/common.scss';
   .auth-page{
	   .auth-top{
		   background: url('https://pic.moresu.com/Fux5cSA5S6ALVmSxq2YFCh5GMC8J') no-repeat;
		   background-size: cover;
		   width:750rpx;
		   height:392rpx;
		   padding:60rpx 24rpx 0 24rpx;
		   .top-info-div{
			   background: rgba(255,255,255,0.9);
			   box-shadow: 0px 0px 11rpx rgba(0,17,52,0.09);
			   border-radius: 18rpx;
			   padding:0 24rpx;
			   .info-name{
				   font-size: 36rpx;
				   font-weight: bold;
				   line-height: 50rpx;
				   color: #070D14;
				   @include flexbox(center,center);
				   padding:36rpx 0;
				   border-bottom:1rpx solid #B8B8B8;
			   }
			   .into-btn{
				   @include flexbox(space-around,center);
				   padding:24rpx 0;
				   font-size: 30rpx;
				   line-height: 42rpx;
				   color: #000000;
				   
			   }
			   .choose.btn-item{
				   font-weight: bold;
				   color: #FF5E01;
				   position: relative;
			   }
			   .choose.btn-item::after{
				   content: " ";
				   position: absolute;
				   width: 42rpx;
				   height: 8rpx;
				   background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
				   border-radius: 4rpx;
				   overflow: hidden;
				   bottom:-24rpx;
				   left:50%;
				   margin-left:-21rpx;
			   }
		   }
	   }
	   .info-con{
		   padding:0 24rpx;
		   margin-top:-88rpx;
		   .base-info{
			   background: rgba(255,255,255,1);
			   box-shadow: 0px 0px 11rpx rgba(0,17,52,0.09);
			   border-radius: 18rpx;
			   padding:32rpx;
			   margin-bottom:180rpx;
			   .licensePicUrl-div{
					@include flexbox(center,center);
					padding:36rpx 0 10rpx 0
			   }
			   .licensePicUrl-text{
				   text-align: center;
				   font-size: 28rpx;
				   color: #070D14;
				   padding-bottom:36rpx;
			   }
		   }
	       .order-list{
			   .order-item{
				   background: rgba(255,255,255,1);
				   box-shadow: 0px 0px 10rpx rgba(0,17,52,0.09);
				   border-radius: 18rpx;
				   padding:24rpx;
				   margin-bottom:24rpx;
				   .item-top{
					   font-size: 28rpx;
					   line-height: 38rpx;
					   color: #070D14;
					   position: relative;
					   padding-right:180rpx;
					   padding-bottom:24rpx;
					   .top-state{
						  background: #fff1e3;
						  border-radius: 0px 18rpx 0px 18rpx; 
						  padding:10rpx 16rpx;
						  font-size:24rpx;
						  color: #FF5E01;
						  font-weight: bold;
						  position: absolute;
						  right:-24rpx;
						  top:-24rpx;
					   }
				   }
				   .goods-div{
					   @include flexbox(space-between,center);
					   .goods-name{
						   font-size: 28rpx;
						   font-weight: bold;
						   line-height: 38rpx;
						   color: #FF5E01;
					   }
					   .goods-price{
						   font-size: 28rpx;
						   font-weight: bold;
						   line-height: 38rpx;
						   color: #070D14;
					   }
				   }
				   .order-info{
					   margin-top:20rpx;
					   background: rgba(249,249,249,1);
					   border-radius: 18rpx;
					   padding:24rpx;
					   .info-row{
						    @include flexbox(flex-start,flex-start);
							font-size: 24rpx;
							line-height: 32rpx;
							margin-bottom:24rpx;
							.row-label{
								color:#929292;
								width:140rpx;
							}
							.row-con{
								color:#1E1E1E 
							}
					   }
					   .info-row:last-child{
						   margin-bottom: 0;
					   }
				   }
				   .order-bottom{
					   padding-top:24rpx;
					   @include flexbox(flex-end,center);
					   .order-price{
						   font-size: 26rpx;
						   color: #070D14;
						   margin-right:36rpx;
						   .num{
							   font-size: 36rpx;
							   font-weight: bold;
							   color: #FF0000;
						   }
					   }
				   }
			   }
		   }
		   .user-list{
			   .user-item{
				   background: rgba(255,255,255,1);
				   border-radius: 18rpx;
				   padding:24rpx;
				   margin-bottom:24rpx;
				   
					   @include flexbox(space-between,flex-start);
					   .user-left{
						   flex:1;
						   .left-top{
							   font-size: 28rpx;
							   line-height: 38rpx;
							   color: #070D14;
						   }
						   .left-bottom{
							   font-size: 22rpx;
							   color: #929292;
							   margin-top:20rpx;
						   }
					   }
					   .user-right{
						   width:300rpx;
						   text-align: right;
						   .right-top{
							   font-size: 28rpx;
							   font-weight: bold;
							   color: #FF5E01;
						   }
						   .right-bottom{
							   font-size: 22rpx;
							   color: #FF5E01;
							   margin-top:20rpx;
						   }
						   
					   }
					   
				   }
			   }
		   
	   }
	   .perfect-auth-button{
		   position: fixed;
		   bottom:0;
		   padding:12rpx 24rpx;
		   @include flexbox(space-between,center);
		   background: #fff;
		   left:0;
		   width:100%
	   }
	   
   }
  
  
</style>